<template>
    <div>
        <h1>房型增加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房间名称</td>
                    <td><input type="text" v-model="info.name" /></td>
                </tr>
                <tr>
                    <td>门市价</td>
                    <td><input type="text" v-model="info.num" /></td>
                </tr>
                <tr>
                    <td>押金</td>
                    <td><input type="text" v-model="info.ya" /></td>
                </tr>
                <tr>
                    <td>房型面积</td>
                    <td>
                        <textarea v-model="info.mian" role="50" sort="5"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>可住人数</td>
                    <td><input type="text" v-model="info.sum" /></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" v-model="info.state" name="state" value="1" />上架
                        <input type="radio" v-model="info.state" name="state" value="0" />下架
                    </td>
                </tr>
                <tr>
                    <td>可否加床</td>
                    <td>
                        <input type="radio" v-model="info.chuang" name="chuang" value="1" />是
                        <input type="radio" v-model="info.chuang" name="chuang" value="0" />否
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="Getphone" />
                        <img :src="info.phone" alt="" width="60" height="60">
                    </td>
                </tr>
                <tr>
                    <td>视频</td>
                    <td>
                        <input type="file" @change="Getlogo" />
                        <img :src="info.logo" alt="" width="60" height="60"></td>
                </tr>
                <tr>
                    <td>介绍</td>
                    <td><input type="text" v-model="info.jie" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button"  class="btn btn-success" value="增加" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';

const route=useRoute();
const router=useRouter();
let info=reactive({
    name:'',
    num:'',
    ya:'',
    mian:'',
    sum:'',
    state:2,
    chuang:2,
    phone:'',
    logo:'',
    jie:'',

})

//图片
const Getphone=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append('file',file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.phone=res.data;
    })
}
//logo上传
const Getlogo=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append('file',file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.logo=res.data;
    })
}


//增加
const ok=()=>{
    if(info.name==""){
        alert('房间名称不能为空!');
        return;
    }
    if(info.num==""){
        alert('门市价不能为空!');
        return;
    }
    if(info.ya==""){
        alert('押金不能为空!');
        return;
    }
    if(info.mian==""){
        alert('房型面积不能为空!');
        return;
    }
    if(info.sum==""){
        alert('可住人数不能为空!');
        return;
    }
    if(info.state==2){
        alert('状态不能为空!');
        return;
    }
    if(info.chuang==2){
        alert('可否加床不能为空!');
        return;
    }
    if(info.phone==""){
        alert('图片不能为空!');
        return;
    }
    if(info.logo==""){
        alert('视频不能为空!');
        return;
    }
    if(info.jie==""){
        alert('介绍不能为空!');
        return;
    }
    axios({
        url:'/api/RoomX/Add',
        method:'post',
        data:info
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('增加成功!');
            router.push('/RoomXList');
        }
        else{
            alert('增加失败!');
        }
    })
}


</script>
